<template>
  <div
    class="container"
    :class="className"
    :style="isBold ? 'font-weight: bold;' : ''"
  >
    <div class="box_mail">
      <div class="title_box">
        <div class="title" :style="'font-size:' + fontSize">
          {{ title }}
        </div>
        <div class="more" @click="$emit('jump')">更多+</div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "",
    },
    isBold: {
      type: Boolean,
      default: false,
    },
    fontSize: {
      type: String,
      default: "32px",
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  .box_mail {
    width: $main-width;
    margin: 30px auto 0 auto;
    .title_box {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 30px;
      position: relative;
      .title {
        flex: 1;
        text-align: center;
        font-size: 32px;
        color: $colorA;
      }
      .more {
        position: absolute;
        top: 19px;
        right: 0;
        color: $colorC;
        font-weight: 400;
        cursor: pointer;
        font-size: 16px;
      }
    }
    .content_box {
      display: flex;
    }
  }
}
.enterprise_box {
  background-image: url("~@/assets/image/index/b3.png");
  // height: 660px;
  margin-bottom: 88px;
}
.financeProduct {
  background-image: url("~@/assets/image/index/b2.png");
  height: 445px;
  color: #fff;
  .title {
    color: #fff !important;
  }
  .more {
    color: #fff !important;
  }
}
.financing {
  background-image: url("~@/assets/image/finance/financingbg.png");
  height: 666px;
  margin-top: 46px;
  .title {
    color: #fff !important;
  }
  .more {
    color: #fff !important;
  }
}
.supportCase_box {
  background-image: url("~@/assets/image/index/b1.png");
  height: 443px;
}
</style>